<template>
    <div>
        <div class="title"> §套餐配置</div>
        <br>
        <div class="search">
            套餐搜索：<input type="text" v-model="value" placeholder="请输入名称/关键词">
            <button @click="returnAll">返回</button>
            <button @click="searchInfo">搜索</button>
        </div>
        <div class="boderPrice">
            价格区间：<input type="number" v-model="minPrice" :min="0" > ~
            <input type="number" v-model="maxPrice" :min="0">
            <button @click="returnAll">返回</button>
            <button @click="borderPriceSearch" style="margin-left:-100px">搜索</button>        
        </div>
        <br>
        <div>
            <button @click="bulkDetetion" class="bulk-detetion">批量删除</button>
            <button @click="addInfo" class="add-info">+ 添加</button>
        </div>

        <el-table
        :data="tableData"
        border
        :row-style="{height: '0'}"
        style="width: 100%;">
            <el-table-column
                class="table-column"
                fixed
                prop="combinationId"
                label="ID"
                width="100">
            </el-table-column>
            <el-table-column
                prop="combinationName"
                label="套餐名称"
                width="130">
            </el-table-column>
            <el-table-column
                prop="combinationPrice"
                label="价格(元)"
                width="100">
            </el-table-column>
            <el-table-column
                prop="detailsUp"
                label="包含项目"
                width="110">
                <template slot-scope="scope">
                    <button class="lookIncludeBtn" @click="lookInclude(scope.row)">查看项目</button>
                    <el-dialog title="项目明细" 
                    append-to-body
                    :visible.sync="dialogTableVisible"
                    >
                        <el-table :data="gridData">
                            <el-table-column property="projectName" label="项目名字" width="150"></el-table-column>
                            <el-table-column property="projectPrice" label="价格" width="100"></el-table-column>
                            <el-table-column property="cyDepartment.departmentName" label="所属科室"></el-table-column>
                            <el-table-column property="projectCreateTime" label="创建时间"></el-table-column>
                        </el-table>
                    </el-dialog>
                </template>
            </el-table-column>
            
            <el-table-column
                prop="combinationIsStatus"
                label="是否启用"
                width="100">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.combinationIsStatus"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeStatus(scope.row)">
                </el-switch>
            </template>
            </el-table-column>
            
            <el-table-column
            prop="combinationUpdateTime"
            label="更新时间"
            width="170">
            </el-table-column>
            <el-table-column
            prop="combinationCreateTime"
            label="创造时间"
            width="170">
            </el-table-column>
            
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button @click="alterClick(scope.row)"  type="text" size="small">修改</el-button>
                    <el-button @click="open(scope.row)" style="color:red" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-dialog 
            title="修改套餐" 
            :show-close="false"
            :visible.sync="dialogVisible"
            width="500px">
            <el-form ref="form" :model="nowCombination" label-width="80px">
                <el-form-item label="套餐id:" class="custom-item">
                    <div style="float:left">{{nowCombination.combinationId}}</div>
                    
                </el-form-item>
                <el-form-item label="套餐名称" class="custom-item">
                    <el-input v-model="nowCombination.combinationName"></el-input>
                </el-form-item>
                <el-form-item label="价格" class="custom-item">
                    <el-input v-model="nowCombination.combinationPrice"></el-input>
                </el-form-item>
                <el-form-item label="项目名" class="custom-item">
                    <el-input v-model="nowCombination.projectName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureCommit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 批量删除 -->
        <el-dialog 
            title="批量删除" 
            :show-close="false"
            :visible.sync="deteleVisible"
            width="500px"
            >
            <template >
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checked">
                    <el-checkbox class="el-checkbox-width" v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
                </el-checkbox-group>
                <el-button class="deleteBtn" @click="commitBelete">确定</el-button>
                <el-button class="deleteBtn" @click="cancelCommit">取消</el-button>
            </template>
        </el-dialog>
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            >
        </el-pagination>
        <!-- 添加 -->
        <el-dialog title="添加套餐" width="40%" :visible.sync="dialogFormVisible">
            <el-form :model="form" status-icon :rules="rules" ref="form">
                <el-form-item label="套餐名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="套餐价格(元)" prop="price" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="包含项目" prop="includePro" :label-width="formLabelWidth">
                    <el-input placeholder="格式为:《id:name》,《id:name》" v-model="form.includePro" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-radio v-model="status" label="1">是</el-radio>
                    <el-radio v-model="status" label="2">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">重 置</el-button>
                <el-button type="primary" @click="addCommit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script>
const options = []
export default {
    data(){
        return{
            // 获取全部内容的
            tableData:[],
            // 分页用的
            page:{
                currentPage: 1,  
                pageSize:5,
                total:0
            },
            // 做明细用的
            dialogTableVisible: false,
            gridData:[],
            // 修改用的
            dialogVisible:false,
            nowCombination:{
                combinationId:0,
                combinationName:"",
                combinationPrice:"",
                projectName:"",
                
            },
            // 做搜索用的
            value:"",
            // 做批量删除
            deteleVisible:false,
            isIndeterminate: true,
            checkAll: false,
            options: options,//可选择的项
            checked: [],//已经选择的
            // 做添加用的
            dialogFormVisible: false,
            form: {
                name: '',
                price: '',
                includePro:''
            },
            status: '1',
            formLabelWidth: '120px',
            isSearch : 0,

            // 价格区间
            minPrice:0,
            maxPrice:10000,
            rules:{
                name:[
                    { required: true, message: '请输入套餐名称',  trigger: 'blur' }
                ],
                price:[
                    { required: true, message: '请输入套餐价格',  trigger: 'blur' }
                ],
                includePro:[
                    { required: true, message: '请输入所包含的项目',  trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.getAllCombination();
    },
    methods:{
        // 获取全部信息
         getAllCombination(){
            this.$axios.post(
                '/combination/getAllCombination',
                {
                    pageCurr:this.page.currentPage,  
                    pageSize:this.page.pageSize,
                }
            ).then(res =>{
                if(res != undefined){
                    if(res.code == 1){
                        console.log("项目列表",res)
                        this.tableData = res.data.list
                        this.page.total = res.data.totalSize
                        // this.getAllDetailsName();
                    }else{
                        alert("服务器出错")
                    }                    
                }

                
            })
        },
        // 修改状态
        changeStatus(row){
            console.log("row",row)
            this.$axios.get(
                '/combination/changeStatus',
                {
                    params:{
                        proStatus:row.combinationIsStatus,
                        combinationId:row.combinationId
                    }
                }
            ).then(res=>{
                console.log(res)
            })
            
        },
        // 查看包含的细项
        lookInclude(row){
            this.dialogTableVisible=true
            this.$axios.get(
                '/combination/lookInclude',
                {
                    params:{
                        id:row.combinationId
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    console.log("套餐包含的项目",res)
                    this.gridData = res.data                    
                }

            })
        },
        // 删除一条记录
        deleteRow(row){
            this.$axios.get(
                '/combination/deleteRow',
                {
                    params:{
                        combinationId:row.combinationId
                    }
                }
            ).then(res=>{
                console.log("删除套餐",res)
                this.getAllCombination();
                // this.getAllName()
            })
        },
        // 查看记录
        open(row) {
            this.$confirm('此操作将删除该套餐, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteRow(row),
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 处理页改变
        handleCurrentChange(newPage) {  
            // console.log(`当前页码变更为：${newPage}`);  
        //    在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  
        // 例如，你可能需要发送一个请求来获取新页码对应的数据  
            if(this.isSearch == 0){
                this.getAllCombination();
            }else if(this.isSearch == 1){
                this.searchInfo();
            }else if(this.isSearch == 2){
                this.borderPriceSearch();
            }
                
        },
        // 取消
        cancel(){
            this.dialogVisible = false;
            this.getAllCombination();
        },
        // 修改
        alterClick(row) {
            this.nowCombination.combinationId = row.combinationId
            this.nowCombination.combinationName = row.combinationName
            this.nowCombination.combinationPrice = row.combinationPrice

            this.$axios.get(
                '/combination/getProjectName',
                {
                    params:{
                        id:this.nowCombination.combinationId
                    }
                }
            ).then(res=>{
                console.log(res)
                this.nowCombination.projectName = res.data 
            })
            this.dialogVisible = true
        },
        sureCommit(){
            this.dialogVisible = false,
            this.$axios.get(
                '/combination/alterInfo',
                {
                    params:{
                        combinationId:this.nowCombination.combinationId,
                        combinationName:this.nowCombination.combinationName,
                        combinationPrice:this.nowCombination.combinationPrice,
                        projectName:this.nowCombination.projectName
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    console.log("修改套餐",res)
                    if(res.code == 2){
                        this.$message({
                            showClose: true,
                            message: '暂未修改',
                        });
                    }else if(res.code == 1){
                        this.getAllCombination();
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                    }else if(res.code == -1){
                        this.$message({
                            showClose: true,
                            message: '填写格式或者是信息有误',
                            type: 'error'
                        });
                    }else if(res.code == -2){
                        this.$message({
                            showClose: true,
                            message: '项目修改信息填写有误',
                            type: 'error'
                        });
                    }else{
                        alert("服务器出错，请稍后再来")
                    }                    
                }

            })
        },
        // 查询的返回键
        returnAll(){
            this.value = ''
            this.getAllCombination();
            this.minPrice=0,
            this.maxPrice=10000,
            this.isSearch = 0
        },
        // 搜索
        searchInfo(){
            this.isSearch = 1;
            this.$axios.get(
                '/combination/searchInfo',
                {
                    params:{
                        value:this.value,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    console.log("套餐搜索",res)
                    this.tableData = res.data.list
                    this.page.total = res.data.totalSize                    
                }

            })
        },
        // 批量删除
        bulkDetetion(){
            this.deteleVisible = true
            this.getAllName()
        },
        handleCheckAllChange(val) {
            this.checked = val ? options : [];
            this.isIndeterminate = false;
        },
        getAllName(){
            this.$axios.post(
                '/combination/getAllName',
            ).then(res =>{
                // cityOptions = res.data
                console.log("项目名称",res)
                if(res != undefined){
                    if(options.length!=0){
                        options.length = 0;    
                    }
                    for(const item of res.data){
                        options.push(item)
                    }                    
                }

            })
        },
        commitBelete(){
            let params = "";
            // 将要删除的名称变成字符串，用，拼接，到后端再去拆分
            for(var i = 0;i <this.checked.length;i++){
                if(i!=this.checked.length-1){
                    params = params + this.checked[i] + "，";
                }else{
                    params = params + this.checked[i]
                }
            }
            this.$axios.get(
                '/combination/commitDelete',{
                    params:{
                        checked:params
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.deteleVisible = false;
                        this.$message({
                            message: '批量删除成功！',
                            type: 'success'
                        });
                        this.getAllCombination();
                        this.getAllName();
                    }else{
                        this.$message.error('删除失败！');
                    }                    
                }

            })
        },
        cancelCommit(){
            this.deteleVisible = false;
            this.dialogFormVisible = false;
        },
        // 添加
        addInfo(){
            this.dialogFormVisible=true;
        },
        // 重置表单内容
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        addCommit(){
            this.$axios.get(
                '/combination/addCommit',
                {
                    params:{
                        name:this.form.name,
                        price: this.form.price,
                        includePro:this.form.includePro,
                        status:this.status
                    }
                }
                
            ).then(res=>{
                console.log(res)
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.getAllCombination();
                        this.getAllName();
                    }else if(res.code == -2){
                        this.$message.error('项目信息填写有误');
                    }else if(res.code == -1){
                        this.$message.error('填写信息格式有误');
                    }
                    else{
                        this.$message.error('添加失败！');
                    }                    
                }

            })
        },
         // 价格区间搜索
        borderPriceSearch(){
            this.isSearch = 2
            this.$axios.get(
                '/combination/borderPriceSearch',
                {
                    params:{
                        minPrice : this.minPrice,
                        maxPrice : this.maxPrice,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res => {
                if(res != undefined){
                    console.log("价格区间搜索",res)
                    this.tableData = res.data.list
                    this.page.total = res.data.totalSize                    
                }

            })
        }
    }
   
}
</script>
<style scoped>
.boderPrice{
    margin-right: 25%;
}
.boderPrice input{
    width: 70px;
    color:gray
}
.boderPrice button{
    margin-left: 2px;
    border-radius: 30px;
    border: none;
    height: 25px;
    background-color:dodgerblue;
    color:white;
    float: right;
    width: 50px;

}
.boderPrice button:hover{
    cursor: pointer;
    background-color: rgb(125, 187, 249);
}
@import "../../static/css/btnStyle.css"
</style>